import React from 'react'
import { Modal, Button, DatePicker, Select, Input, Table, message } from 'antd';
import TreeListTheme from './TreeListTheme';
import './ShowTitleList.less';
import { connect } from 'dva';

const { RangePicker } = DatePicker;
const Option = Select.Option;
const Search = Input.Search;

@connect(({ add, video, theme }) => ({
    add: add,
    video: video,
    theme: theme
}))
class ShowTitleListThemeCopy extends React.Component {
    state = {
        visible: false,
        RangePicker: [],
        type: '',
        keywords: '',
        valueRangePicker: [],
        selectedRowKeys: [],
        index: 1,
        data: {}
    }
    componentDidMount() {
        if (true) {

        }
        this.props.dispatch({ type: 'add/getTreeList' })
        this.props.dispatch({ type: 'add/getTreeListVideo' })
    }
    onRef = (child) => {
        this.child = child
    }
    showModal = () => {

        this.props.dispatch({ type: 'add/updateTableListRef',
            data:[]
         })
        this.setState({
            visible: true,
            selectedRowKeys:[],
            data:{}
        });
    }

    handleOk = (e) => {
        let data = this.state.data
        if (this.props.theme.params.id) {  //判断是否是专题资讯复制
            data.theme_id = this.props.theme.params.id;
            let flag = true;
            for(let val of data.used_modules){
                if(val.type == 3){
                    flag = false;
                    break;
                }
            }
            if(!flag){
                message.error('不能复制类型为banner的资讯');
                return false;
            }
            let _this = this;
            let time = 0;

            let token = localStorage.getItem('token');
            if ( data.used_modules &&  data.used_modules.length > 0){
                data.used_modules.map((item, index) => {
                    let copy_data = { ...item, theme_id: _this.props.theme.params.id ,'token':token};

                    console.log(copy_data,'copy_data')
                    setTimeout(()=>{
                        _this.props.dispatch({
                            type: 'theme/copy', payload: {
                                data: copy_data,
                                dataAugment: {
                                    index: _this.props.theme.index,
                                    theme_id: _this.props.theme.params.id
                                }
                            }
                        });
                    }, time);
                    time += 500;

                })
            }


            this.setState({
                visible: false,
            });
        } else {
            // this.props.dispatch({
            //     type: 'video/copy', payload: {
            //         data: data,
            //         dataAugment: {
            //             index: this.props.video.index,
            //             plate_id: this.props.video.dataAugment.plate_id
            //         }
            //     }
            // });
            // this.setState({
            //     visible: false,
            // });
        }

    }

    handleCancel = (e) => {

        this.setState({
            visible: false,
        });
    }

    getRangePicker = (date, dateString) => {
        this.setState({
            RangePicker: dateString,
            valueRangePicker: date
        })
    }
    getSelect = (value) => {
        this.setState({
            type: value
        })
    }

    /**
     * 重置
     */
    resetSerach = () => {
        this.setState({
            RangePicker: [],
            valueRangePicker: [],
            type: '',
            keywords: ''
        })
    }
    /**
   * 选择数据s
   */
    onSelectChange = (selectedRowKeys, selectedRows) => {
        this.setState({ selectedRowKeys });
        //判断是否是banner 的复制
        if (this.props.temp === 1) {
            let activeModal = this.child.state.activeModal
            let module_name = ''
            switch (activeModal) {
                case 0:
                    module_name = 'fcvideo'
                    break;
                case 1:
                    module_name = 'fcinformation'
                    break;
                case 3:
                    module_name = 'fcinformation_theme'
                    break;
                case 4:
                    module_name = 'fcfind'
                    break;
                default:
                    break;
            }
            if (selectedRows[0]) {
                let data = {
                    plate_id: this.props.id,
                    used_modules: [{
                        used_id: selectedRows[0].id,
                        module_name: 'banner_module_name',
                        func_name: 'app\\fcvideo\\controller\\Modulecheck::videoListInfo',
                        title: selectedRows[0].title,
                        img: selectedRows[0].img,
                        create_user: selectedRows[0].create_user,
                        create_time: selectedRows[0].create_time
                    }]
                }
                this.setState({
                    data: data
                })
                if (this.props.form) {
                    this.props.form.setFieldsValue({
                        banner_module_name: module_name,
                        banner_used_id: selectedRows[0].id,
                        banner_used_title: this.props.add.banner_plate_name+'-'+selectedRows[0].title,
                    })
                } else {
                    message.error('选择失败，请重新选择')
                }
                this.setState({
                    visible: false
                })
            }
        } else {
            let activeModal = this.child.state.activeModal
            let used_modules = []
            let data = {}
            //视频
            if (activeModal == 0) {
                selectedRows.map((item, index) => {
                    let obj = {
                        used_id: item.id,
                        thumbnail: item.thumbnail,
                        module_name: 'fcvideo',
                        func_name: "app\\fcvideo\\controller\\Modulecheck::videoListInfo",
                        title: item.title,
                        img: item.img,
                        create_user: item.create_user,
                        create_user_id: item.create_user_id ? item.create_user_id : 0,
                        create_time: item.create_time
                    }
                    used_modules.push(obj)
                })
                data = {
                    plate_id: this.props.id,
                    used_modules: used_modules
                }
            }
            this.setState({
                data: data
            })
            //资讯
            if (activeModal == 1) {
                selectedRows.map((item, index) => {
                    // let obj = {
                    //     used_id: item.id,
                    //     thumbnail: item.thumbnail,
                    //     module_name: 'fcinformation',
                    //     func_name: 'app\\fcinformation\\controller\\Modulecheck::informationListInfo',
                    //     title: item.title,
                    //     type:item.type,
                    //     img: item.img,
                    //     url: item.url,
                    //     create_user: item.create_user,
                    //     create_time: item.create_time
                    // }

                    used_modules.push(item)
                })
                data = {
                    plate_id: this.props.id,
                    used_modules: used_modules
                }
            }
            //专题
            if (activeModal == 3) {
                selectedRows.map((item, index) => {
                    let obj = {
                        used_id: item.id,
                        thumbnail: item.thumbnail,
                        module_name: 'fcinformation_theme',
                        func_name: 'app\\fcinformation\\controller\\Modulecheck::informationThemeListInfo',
                        title: item.title,
                        img: item.img,
                        create_user: item.create_user ? item.create_user : '',
                        create_user_id: item.create_user_id ? item.create_user_id : 0,
                        create_time: item.create_time
                    }
                    used_modules.push(obj)
                })
                data = {
                    plate_id: this.props.id,
                    used_modules: used_modules
                }
            }
            //服务
            if (activeModal == 4) {
                selectedRows.map((item, index) => {
                    let obj = {
                        used_id: item.id,
                        thumbnail: item.thumbnail,
                        module_name: 'fcfind',
                        func_name: 'app\\fcinformation\\controller\\Modulecheck::informationThemeListInfo',
                        title: item.title,
                        img: item.img,
                        create_user: item.create_user ? item.create_user : '',
                        create_user_id: item.create_user_id ? item.create_user_id : 0,
                        create_time: item.create_time
                    }
                    used_modules.push(obj)
                })
                data = {
                    plate_id: this.props.id,
                    used_modules: used_modules
                }
            }
            this.setState({
                data: data
            })
        }
    }


    /**
     * 搜索
     */
    serachTable = () => {
        let activeModal = this.child.state.activeModal
        let plate_id = this.child.state.plate_id
        if (activeModal == 0) {
            let dataAugment = {
                index: this.state.index,
                status: 2,
                page_size: 10,
                plate_id: plate_id,
                key: this.state.keywords,
                start: this.state.RangePicker.length === 2 ? this.state.RangePicker[0] + " 00:00:00" : '',
                end: this.state.RangePicker.length === 2 ? this.state.RangePicker[1] + " 23:59:59" : ''
            }
            // this.props.dispatch({ type: 'add/getTableListVideo', payload: { dataAugment: dataAugment } });
            this.props.dispatch({ type: 'add/getTableList', payload: { dataAugment: dataAugment } });
        }
        if (activeModal == 1) {
            let dataAugment = {
                index: this.state.index,
                status: 2,
                page_size: 10,
                plate_id: plate_id,
                key: this.state.keywords,
                start: this.state.RangePicker[0],
                end: this.state.RangePicker[1]
            }
            this.props.dispatch({ type: 'add/getTableList', payload: { dataAugment: dataAugment } });
        }
    }
    /**
     * 重置 index
     */
    resetIndex = () => {
        this.setState({
            index: 1
        })
    }
    render() {
        const columns = [{
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            render: (text, record, index) => {
                return (
                    <div>
                        {record.img  ? <img src={record.img} alt="..." width="60px" height="30px" style={{ marginRight: '10px' }} /> : ''}
                        <span>{record.title}</span>
                    </div>
                )
            }
        }, {
            title: '创建人',
            dataIndex: 'create_user',
            key: 'create_user',
        }, {
            title: '创建时间',
            dataIndex: 'create_time',
            key: 'create_time',
        },
        // {
        //     title: '状态',
        //     dataIndex: 'status',
        //     key: 'status',
        //     render: () => {
        //         return <span style={{ color: 'green' }}>审核通过</span>
        //     }
        // }

    ]
        const { dataSourceRef } = this.props.add
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        return (
            <div style={{ display: 'inline-block' }}>
                <Button type="default" onClick={this.showModal}>
                    复制资讯到专题
                </Button>
                <Modal
                    title="复制"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width="80%"
                    footer={this.props.temp === 1 ? <b>注：复制只能单选，如多选默认以第一个选择为准</b> : undefined}
                >
                    <div className="showTitleList">
                        <TreeListTheme onRef={this.onRef} resetIndex={this.resetIndex} setTableList={this.setTableList} onlyInformation={1}
                        />
                        <div className="rightTable">
                            <div className="tableHead">
                                <div>
                                    时间：<RangePicker onChange={this.getRangePicker} value={this.state.valueRangePicker} />
                                </div>

                                <div style={{ margin: '0 17px' }}>
                                    关键字搜索：<Search
                                        placeholder="输入关键字搜索"
                                        onChange={(e) => this.setState({ keywords: e.target.value })}
                                        value={this.state.keywords}
                                        style={{ width: 200 }}
                                    />
                                </div>
                                <div>
                                    <Button type="primary" onClick={this.serachTable}
                                        style={{ marginRight: '10px', marginBottom: '10px' }}>搜索</Button>
                                    <Button onClick={this.resetSerach}>重置</Button>
                                </div>
                            </div>
                            <Table
                                columns={columns}
                                dataSource={dataSourceRef.list}
                                bordered
                                rowSelection={rowSelection}
                                pagination={{
                                    current: this.state.index,
                                    total: dataSourceRef.total, //数据总数量
                                    size: 'small',
                                    showQuickJumper: true,
                                    pageSize: 10,  //显示几条一页
                                    defaultPageSize: 10, //默认显示几条一页
                                    // showSizeChanger: true,  //是否显示可以设置几条一页的选项
                                    style: { marginRight: '50px' },
                                    showTotal: () => {  //设置显示一共几条数据
                                        return `共有${dataSourceRef.total}数据`
                                    },
                                    onChange: (page) => {
                                        this.setState({
                                            selectedRowKeys:[],
                                            data: []
                                        })
                                        let activeModal = this.child.state.activeModal
                                        let plate_id = this.child.state.plate_id
                                        if (activeModal == 0) {
                                            let dataAugment = {
                                                index: page,
                                                status: 2,
                                                page_size: 10,
                                                plate_id: plate_id,
                                                key: this.state.keywords,
                                                start: this.state.RangePicker[0],
                                                end: this.state.RangePicker[1]
                                            }
                                            this.props.dispatch({ type: 'add/getTableListVideo', payload: { dataAugment: dataAugment } });
                                        }
                                        if (activeModal == 1) {
                                            let dataAugment = {
                                                index: page,
                                                status: 2,
                                                page_size: 10,
                                                plate_id: plate_id,
                                                key: this.state.keywords,
                                                start: this.state.RangePicker[0],
                                                end: this.state.RangePicker[1]
                                            }
                                            this.props.dispatch({ type: 'add/getTableList', payload: { dataAugment: dataAugment } });
                                        }
                                        if (activeModal == 3) {
                                            let dataAugment = {
                                                index: page,
                                                page_size: 10,
                                                key: this.state.keywords,
                                            }
                                            this.props.dispatch({ type: 'add/themeList', payload: { dataAugment: dataAugment } });
                                        }
                                        if (activeModal == 4) {
                                            let dataAugment = {
                                                index: page,
                                                page_size: 10,
                                                key: this.state.keywords,
                                            }
                                            this.props.dispatch({ type: 'add/serviceList', payload: { dataAugment: dataAugment } });
                                        }
                                        this.setState({
                                            index: page
                                        })
                                    }
                                }}
                            />
                            <p></p>
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }
}

export default ShowTitleListThemeCopy;
